<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.9.0.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
        3.1、动态组件
        - 组件名：component 
        - 必传属性：is ; 通过为该属性取值组件名称，完成组件替换
        - 作用：vue核心语法中内置的组件，在页面中描述一个组件的占位，根据需求动态切换需要展示组件
        3.2、组件缓存
        - 组件名：keep-alive
        - 作用：让已经访问的组件在内存保持存在，后续执行组件切换时，不会重新创建组件
        - 定义属性：
            + include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
            + exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
            + max - 数字。最多可以缓存多少组件实例。
        - 设计生命周期函数：activated,deactivated
        -->
        <input type="button" value="空字符串" @click=" name='' ">
        <input type="button" value="Hello" @click=" name='HelloComp' ">
        <input type="button" value="Word" @click=" name='WordComp' ">
        <input type="button" value="Test" @click=" name='TestComp' ">

        <hr>
        <!-- <hello-comp v-if="name=='HelloComp'"></hello-comp>
        <word-comp v-if="name=='WordComp'"></word-comp> -->

        <!-- <hello-comp v-show="name=='HelloComp'"></hello-comp>
        <word-comp v-show="name=='WordComp'"></word-comp> -->

        <!-- <component is="WordComp"></component> -->
        <!-- <component :is=" name "></component> -->
        
        <!-- <keep-alive>
            <hello-comp v-if="name=='HelloComp'"></hello-comp>
            <word-comp v-if="name=='WordComp'"></word-comp>
        </keep-alive> -->
        <keep-alive :max=" 5 " exclude="TestComp">
            <component :is=" name "></component>
        </keep-alive>
        <hr>
    </div>
</body>
<script>
    Vue.component("HelloComp",{
        template:"<h1>Hello 组件</h1>",
        methods: {
            loadData(){
                $.ajax({
                    url:"http://127.0.0.1:80/filmApi/loadFilms.php",
                    type:"post",
                    data:{
                        size:50
                    },
                    dataType:"json",
                    success:( { resultState,msg,result } )=>{
                        console.log(resultState,msg,result);
                    },
                })
            }
        },
        created() {
            this.loadData();
            console.log("HelloComp的创建");
        },
        destroyed() {
            console.log("HelloComp的销毁");
        },
    })
    Vue.component("WordComp",{
        template:"<h3>Word 组件</h3>",
        created() {
            console.log("WordComp的创建");
        },
        destroyed() {
            console.log("WordComp的销毁");
        },
        activated() {
            console.log("WordComp被激活");
        },
        deactivated() {
            console.log("WordComp被去激活");
        },
    })
    Vue.component("TestComp",{
        template:"<h3>Test 组件</h3>",
        created() {
            console.log("TestComp的创建");
        },
        destroyed() {
            console.log("TestComp的销毁");
        },
    })
    new Vue({
        el:"#app",
        data:{
            name:"HelloComp"
        }
    })
</script>
</html>